<template>
  <header>
    <div class="header-main">
        <div class="header-left">
            <h1 class="logo"><img src="@/assets/img/logo.png" alt=""></h1>
            <ul>
                <li :class="show=='shouye'?'active':''" title="首页" @click="goHome">首页</li>
                <li :class="show=='kechen'?'active':''" title="课程" @click="goCourse">课程</li>
                <li :class="show=='huiyuan'?'active':''" title="会员" @click="goVipPage">会员</li>
            </ul>
        </div>
        <div class="header-right">
            <div class="search">
                <input type="text" placeholder="搜索想要的课程">
                <i><el-icon :size="20"><Search /></el-icon></i>
            </div>
            <div class="shop"><i style="cursor: pointer;" @click="goCart"><el-icon :size="20"><ShoppingCartFull /></el-icon></i></div>
            <!-- 用户未登录 -->
            <div v-if="!isLogin" class="login-before" @click="goLogin">登录/注册</div>
            <!-- 用户登录后 -->
            <div v-if="isLogin" class="login-after">
                <span>我的课程</span>
                <img :src="userInfo.info.avatar" alt="用户头像" title="用户头像" @mouseenter="showMore">
            </div>
            <!-- 展示用户信息 -->
            <div v-show="isShowMore" class="userInfo" @mouseleave="closeShowMore">
                <div class="userInfo-top">
                    <div class="top-left">
                        <img :src="userInfo.info.avatar" alt="用户头像" title="用户头像">
                    </div>
                    <div class="top-right">
                        <p>用户昵称:{{userInfo.info.nickName}}</p>
                        <p><span>{{userInfo.info.vipInfo.vipName}}</span></p>
                        <p><span>{{userInfo.info.endDays}}天后到期</span></p>
                    </div>
                </div>
                <div class="userInfo-center">
                    <ul>
                        <li>我的课程</li>
                        <li>订单中心</li>
                        <li>我的消息</li>
                        <li>个人设置</li>
                    </ul>
                </div>
                <div class="userInfo-bottom">
                    <span @click="userLogout">退出登录</span>
                </div>
            </div>
        </div>
    </div>
  </header>
</template>

<script setup>
//引入vue组合式api
import {ref,onBeforeMount,watch,reactive,onMounted} from "vue"
//引入路由相关函数
import {useRouter,useRoute} from 'vue-router'
//element ui
import {Search,ShoppingCartFull} from '@element-plus/icons-vue'
import {ElIcon,ElMessage} from 'element-plus'
//引入请求api
import {createTempToken,reqUserInfo,reqUserLogout} from '@/api/userInfo.js'
//引入pinia仓库
import {useUserStore} from '@/store/user.js'
const userStore = useUserStore()

//定义当前组件对应路由应该展示 首页 课程 还是会员
let show = ref("shouye")
//用户是否登录
let isLogin = ref(false);
//是否显示用户更多信息
let isShowMore = ref(false);

//鼠标滑过用户头像事件
const showMore = () => {
    isShowMore.value = true;
}
//鼠标滑出用户头像事件
const closeShowMore = () => {
    isShowMore.value = false;
}

//路由相关函数
const router = useRouter()
const route = useRoute()

//登录用户的信息
let userInfo = reactive({
    info:{
        avatar:'',
        nickName:"",
        vipInfo:{
            vipName:""
        },
        endDays:''
    }
})

//跳转到课程
const goCourse = ()=>{
    router.push("/course")
}
const goHome = ()=>{
    router.push("/")
}
const goVipPage = ()=>{
    router.push("/vippage")
}

//watch监视属性,监视一下当前路由
watch(()=>router.currentRoute.value.path,(newValue,oldValue)=>{
    // console.log(newValue,oldValue);
    if(newValue === "/course"){
        show.value = "kechen"
    }else if(newValue === "/vippage"){
        show.value = "huiyuan"
    }else{
        show.value = "shouye"
    }
},{ immediate: true })

//登录按钮login
const goLogin = ()=>{
    //跳转到登录页
    router.push("/login")
}

//用户退出登录
const userLogout = () => {
    reqUserLogout().then(res=>{
        location.reload();  //刷新页面
        userStore.token = "";  //清除仓库token
        localStorage.removeItem('xiaoluxian_user');  //本地存储
        // localStorage.clear();
        ElMessage({
            message:"退出成功",
            type:"success"
        })
        console.log("用户登出api成功",res);
    })
}

//点击购物车跳转
const goCart = () => {
    router.push('/cart');
}


//生命周期函数
onBeforeMount(()=>{
    if(userStore.token){
        //后台创建临时token
        createTempToken().then(res=>{
            //获取登录用户信息
            reqUserInfo({token:res.data.token}).then(res=>{
                userInfo.info = res.data.data;
                //计算会员到期时间
                let now = new Date().getTime();
                let endTime = userInfo.info.vipInfo.endTime-now;
                userInfo.info.endDays = Math.floor( endTime/1000/60/60/24);
                console.log("登录用户信息获取api成功",res);
            })
            console.log("临时token创建api成功",res);
        })
    }
})
onMounted(() => {
    //判断用户是否登录，根据仓库token
    if(userStore.token){
        isLogin = true;
    }
})

</script>

<style scoped>
header{
    width:100%;
    height: 80px;
}
.header-main{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width:1000px;
    height:80px;
    margin: 0 auto;
}
.header-left{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo{
    width:127px;
    height:50px;
    margin-right: 51px;
}
.logo img{
    width:100%;
    height: 100%;
}
.header-left ul{
    display: flex;
}
.header-left ul .active{
    color: #388fff;
    font-weight:700;
    border-bottom: 4px solid #388fff;
}
.header-left ul li{
    padding:27px 0;
    cursor: pointer;
}
.header-left ul li + li{
    margin-left: 79px;
    font-size:16px;
    color:#808080;
}
.header-right{
    display: flex;
    align-items:center;
}
.header-right .search{
    display: flex;
    align-items: center;
    padding: 0 10px;
    width:320px;
    height:43px;
    background: #f0f2f4;
    border-radius: 5px;
}
.header-right .search input{
    width:270px;
    height: 43px;
    border:none;
    background: transparent;
    outline: none;
}
.header-right .shop{
    display: flex;
    align-items: center;
    margin-left:42px;
}
/* 当前用户未登录状态 */
.header-right .login-before{
    margin-left:39px;
    font-size:16px;
    color: #808080;
    cursor: pointer;
}
.header-right .login-before:hover{
    color: #388fff;
}
/* 用户登录后展示头像等信息 */
.header-right .login-after{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-right .login-after span{
    color:#808080;
    margin:0 20px;
    cursor: pointer;
}
.header-right .login-after span:hover{
    color: #388fff;
}
.header-right .login-after img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border:none;
    cursor: pointer;
}
.header-right .userInfo{
    width:200px;
    background:#fff;
    position: absolute;
    top:80px;
    right:200px;
    z-index:999;
    border: 1px solid rgba(248, 250, 252, 1);
    box-shadow: 0px 5px 15px 3px #888888;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.header-right .userInfo .userInfo-top{
    width:200px;
    height:60px;
    display: flex;
    justify-content:space-around;
    align-items: center;
    margin:5px 0;
}
.header-right .userInfo .userInfo-top .top-left img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border:none;
    cursor: pointer;
}
.header-right .userInfo .userInfo-top .top-right{
    font-size: 12px;
    color: #808080;
}
.header-right .userInfo .userInfo-center{
    width: 200px;
    margin: 5px 0;
}
.header-right .userInfo .userInfo-center ul{
    width:200px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.header-right .userInfo .userInfo-center ul li{
    width: 90px;
    height: 30px;
    margin: 3px 5px;
    background: #d9cbcb;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
}
.header-right .userInfo .userInfo-center ul li:hover{
    color:#388fff;
}
.header-right .userInfo .userInfo-bottom{
    width: 200px;
    height: 30px;
    margin: 5px 0;
    color: #808080;
    display: flex;
    justify-content:end;
}
.header-right .userInfo .userInfo-bottom span{
    margin: 0 15px;
    font-size:14px;
    cursor: pointer;
}
.header-right .userInfo .userInfo-bottom span:hover{
    color: #388fff;
}
</style>